<searchForm id="searchForm" th:fragment="searchForm">
    <div class="toggle active">
        <label>Search.</label>
        <div class="toggle-content">

            <form data-example-id="input-group-with-button" class="pos-search-form" data-updater="#employeeGrid">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="input-group input-group-lg">
                            <input type="text" class="form-control" placeholder="Search for employee..." id="itemName" />
                  <span class="input-group-btn">
                    <button id="search-item" class="btn btn-default" type="button">Search</button>
                  </span>
                        </div><!-- /input-group -->

                    </div><!-- /.col-lg-6 -->
                    <div class="col-lg-6">

                        <div class="input-group">
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-default " data-toggle="modal" data-target="#employeeForm">
                        <span aria-hidden="true" class="glyphicon glyphicon-plus"></span>New Employee</button>
                  </span>

                        </div><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->
                </div>

            </form>
        </div>
    </div>
</searchForm>

<employeeGrid id="employeeGrid" th:fragment="employeeGrid">
    <div>

        <table id="employeeGrid"></table>
        <div id="employeeGridPager"></div>
    </div>
</employeeGrid>

<employeeForm id="employeeForm" th:fragment="employeeForm">
    <div data-loader="showDetails" id="employeeForm" class="modal fade bs-large-modal-lg pos-model" keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header"><!-- modal header -->
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">New Employee</h4>
                </div><!-- /modal header -->
                <form class="sky-form boxed" method="post" action="save" id="new-employee-form1" data-updater="#employeeGrid">
                <!-- modal body -->
                <div class="modal-body">

                        <input type="hidden" id="employeeForm-employeeId"  name="employeeId" />

                        <fieldset>
                            <div class="row">
                                <section class="col col-md-6">
                                    <label class="input">
                                        <i class="icon-prepend fa fa-user"></i>
                                        <input placeholder="First Name" class="form-control" type="text" id="employeeForm-firstName" name="firstName"/>
                                    </label>
                                </section>
                                <section class="col col-md-6">
                                    <label class="input">
                                        <i class="icon-prepend fa fa-user"></i>
                                        <input placeholder="Middle Name" class="form-control" type="text" id="employeeForm-middleName" name="middleName"/>
                                    </label>
                                </section>
                                <section class="col col-md-6">
                                    <label class="input">
                                        <i class="icon-prepend fa fa-user"></i>
                                        <input placeholder="Last Name" class="form-control" type="text" id="employeeForm-lastName" name="lastName" />
                                    </label>
                                </section>
                            </div>

                            <div class="row">
                                <section class="col col-md-6 form-group">
                                    <label class="input">
                                        <i class="icon-prepend fa fa-envelope"></i>
                                        <input type="email" placeholder="E-mail" name="email" id="employeeForm-email"/>
                                    </label>
                                </section>
                                <section class="col col-md-6">
                                    <label class="input">
                                        <i class="icon-prepend fa fa-phone"></i>
                                        <input  type="tel" placeholder="Mobile Number" class="form-control"  id="employeeForm-mobileNumber"  name="mobileNumber" />
                                    </label>
                                </section>
                                <section class="col col-md-6">
                                    <label class="input">
                                        <i class="icon-prepend fa fa-phone"></i>
                                        <input placeholder="Phone Number" class="form-control" type="text" id="employeeForm-phoneNumber"  name="phoneNumber" />
                                    </label>
                                </section>
                            </div>
                        </fieldset>

                        <fieldset>
                            <div class="row">
                                <section class="col col-md-5">
                                    <label class="select">
                                        <select name="country" id="employeeForm-country">
                                            <option disabled="" selected="" value="0">Country</option>
                                            <option value="1">India</option>
                                        </select>
                                        <i></i>
                                    </label>
                                </section>

                                <section class="col col-md-4">
                                    <label class="input">
                                        <input type="tel" placeholder="City" name="address.city" required="required"  id="employeeForm-address-city"/>
                                    </label>
                                </section>

                                <section class="col col-md-3">
                                    <label class="input">
                                        <input type="tel" placeholder="Post code" name="address.pincode" id="employeeForm-address-pincode"/>
                                    </label>
                                </section>
                            </div>


                            <section>
                                <label class="textarea">
                                    <i class="icon-append fa fa-pencil-square-o"></i>
                                    <textarea placeholder="Additional info" rows="3" name="note" id="employeeForm-note"></textarea>
                                </label>
                            </section>
                        </fieldset>


                        <fieldset>

                            <section>
                                <label class="input">
                                    <i class="icon-append fa fa-user"></i>
                                    <input required="true" placeholder="Username" type="text"  name="userName" id="employeeForm-userName" />
                                    <b class="tooltip tooltip-bottom-right">Needed to verify your account</b>
                                </label>
                                <div class="text-danger hide" role="alert" id="userNameAlert">
                                    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                                    <span class="sr-only">Error:</span>
                                    Someone already has that username. Try another?
                                </div>
                            </section>

                            <section>
                                <label class="input">
                                    <i class="icon-append fa fa-lock"></i>
                                    <input required="true" placeholder="Password" type="password" id="password" name="password" />
                                    <b class="tooltip tooltip-bottom-right">Only latin characters and numbers</b>
                                </label>

                            </section>
                            <section class="form-group">
                                <label class="input">
                                    <i class="icon-append fa fa-lock"></i>
                                    <input required="true" placeholder="Confirm Password" type="password" name="confirmPassword" id="confirmPassword" />
                                    <b class="tooltip tooltip-bottom-right">Only latin characters and numbers</b>
                                </label>

                            </section>


                        </fieldset>



                </div>
                <!-- /modal body -->

                <div class="modal-footer"><!-- modal footer -->
                    <button class="btn btn-default" data-dismiss="modal">Close</button> <input type="submit" id="create-product" class="btn btn-primary" value="Save changes"></input>
                </div><!-- /modal footer -->
                </form>
            </div>
        </div>
    </div>
</employeeForm>
